<template>
  <div class="post">
     <router-link to="/search">
      <div class="box">
      <span class="el-icon-zoom-in"></span>
       <span class="span">200000+ 免费模板任你搜索</span>
    </div>
    </router-link>
    <div class="sters">
      <ul>
        <li v-for="(item,index) in arr" :key="index" @click="btn(item);ipt(index)" :class="{activity: activityindex == index}">
          {{item.name}}
        </li>
      </ul>
         <el-dropdown trigger="click" class="dropdown">
        <i class="el-icon-arrow-down el-icon--right"></i>
         <el-dropdown-menu slot="dropdown" id="el">
           <ul id="ul">
        <li v-for="(item,index) in arr" :key="index" @click="btn(item)">
          <span>{{item.name}}</span>
        </li>
        </ul>
      </el-dropdown-menu>
      </el-dropdown>
      <div class="div-btn">
        <ul>
          <li>最新</li>
          <li>最热</li>
          <li>使用最多</li>
          <li>最多收藏</li>
          <li>筛选</li>
        </ul>
      </div>
    </div>
     <div class="tp">
      <ul>
        <li v-for="(b,i) in arr1" :key="i">
        <router-link :to="{
          path:'/detailpage/'+b.designTemplateId}">
          <img :src="b.designTemplateThumbUrls[0]" alt="">
          </router-link>
        </li>
      </ul>
    </div>
    <div class="tp">
      <ul>
        <li v-for="(a,b) in arr2" :key="b">
          <router-link :to="{
          path:'/detailpage/'+a.designTemplateId}">
          <img :src="a.designTemplateThumbUrls[0]" alt="">
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [],
      arr1:[],
      arr2:[],
      activeIndex: '1',
      activityindex:0
    };
  },
  methods: {
    getApp() {
      this.$ajax
        .get(
          `bcd/home/getDesignType.do?_dataType=json&client_type=40&second_kind_id=${this.id}&_dataClientType=3`
        )
        .then((res) => {
          this.arr = res.data.body.secondKindInfo.repoTag.use;
          this.arr.unshift({ name:"全部", tagId:"e", thirdKindId: 216 });
        });
       
    },
    getabb(){
      this.$ajax
        .get(
          `/efg/cache/today_recommend_template_v2/today_recommend_mobile_v2_${this.id}_50_1?v=1663659143000&client_type=40&_dataClientType=3`
        )
        .then((res) => {
          this.arr1 = res.data.body.templates;
          // console.log(this.arr1);
        });
    },
    btn(item){
       this.arr1 = '';
       this.item = item.tagId;
       console.log(this.item);
       this.$ajax
        .get(
          `https://pub-cdn-oss.chuangkit.com/cache/wx_app_template_cache_v2/1_1_50_${this.id}_0_0_${this.item}_0_0?v=1663330732302&client_type=40&_dataClientType=3`
        )
        .then((res) => {
          this.arr2 = res.data.body.templates;
          console.log(this.arr2);
        });
    },
     ipt(index){
    this.activityindex = index;
  }
  },
  created() {
    this.id = this.$route.params.id;
    // console.log(this.id);
    this.getApp();
    this.getabb();
  },
};
</script>

<style scoped>
.activity{
	border-bottom: 1px solid rgb(87, 76, 236);
	color: #333;
}
  .box{
  width: 95%;
  height: 40px;
  line-height: 40px;
  background-color: #fff;
  border-radius: 10px;
  font-size: 18px;
  margin: 15px 0px 15px 15px;
}
.span{
  margin-left: 15px;
}
.sters ul{
  list-style: none;
  white-space: nowrap;
  overflow: auto;
  background-color: #fff;
}
ul:nth-child(2){
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
ul:nth-child(2) li{
  background-color: #eee;
  border-radius: 10px;
  margin: 8px;
}
.sters ul li{
  display: inline-block;
  width: 20%;
  height: 40px;
  line-height: 40px;
}
.sters ul li span{
  display: inline-block;
  height: 40px;
}
.sters{
  position: relative;
  color: #999;
}
.post{
  width: 102%;
  background-color: #fff;
}
*{
  margin: 0px;
  padding: 0px;
}
.tp ul{
 list-style: none;
 display: flex;
 justify-content: space-evenly;
 flex-wrap: wrap;
 margin-top: 20px;
}
.tp ul li{
  width: 45%;
  margin-bottom: 15px;
}
img{
  width: 100%;
  height: 100%;
}
.div1 img{
  width: 23px;
  height: 27px;
  background-color: #fff;
  position: absolute;
  right: -4px;
  top: 60px;
}
.div1 .ul{
  height: 300px;
  background-color: #fff;
}
.div-btn{
  width: 100%;
}
.div-btn ul li{
  width: 70px;
  border-radius: 15px;
  margin-left: 8px;
  background-color: #eee;
}
.el-dropdown-menu{
  list-style: none;
}
#ul{
  width: 500px;
  height: 172px;
  list-style: none;
  background-color: #fff;
  position:absolute;
  top:-34px;
  left: -199px;
}
#ul li{
  display: inline-block;
  width: 17%;
  height: 31px;
  line-height: 31px;
  margin:6px;
  text-align: center;
  background-color: #eee;
  border-radius: 10px;
}
.el-dropdown-menu{
  position: relative;
  left: 0px;
  top: 10px;
}
 .el-icon--right {
  width: 40px;
  height: 40px;
  line-height: 40px;
  background-color: #ffff;
  font-size: 22px;
  position: absolute;
  top: -58px;
  left: 155px;
}
#dropdown-menu-3621{
  position: absolute;
  top: 30px;
}
</style>